App.require(function () {
    var app = App.getCurrent();

    app.definePage("strpcselectYear", {
        getDomObj: function () {
            this.attachDom(".select-hour", "selectHour")
                .attachDom(".select-timer-container", "container")
                .attachDom(".select-minute", "selectMinute")
                .attachDom(".select-hour ul", "selectHourUl")
                .attachDom(".select-minute ul", "selectMinuteUl")
                .attachDom(".select-hour li.selected", "hourSelected")
                .attachDom(".select-minute li.selected", "minuteSelected")
                .attachEvent("selectHour", "click", this.clickHourHandler, false)
                .attachEvent("selectHour", "mousewheel", this.wheelHourHandler, false)
                .attachEvent("selectHour", "DOMMouseScroll", this.scrollHourHandler, false)
                .attachEvent("selectHour", "iconclick", this.iconClickHourHandler, false)
                .attachEvent("selectMinute", "mousewheel", this.wheelMinuteHandler, false)
                .attachEvent("selectMinute", "DOMMouseScroll", this.scrollMinuteHandler, false)
                .attachEvent("selectMinute", "iconclick", this.iconClickMinuteHandler, false)
                .attachEvent("selectMinute", "click", this.clickMinuteHandler, false);
        },
        wheelHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(ev.wheelDelta);
        },
        scrollHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(-ev.delta);
        },
        wheelMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(ev.wheelDelta);
        },
        scrollMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(-ev.delta);
        },
        createMinMaxYearAndMonth: function () {
            var data = this.data;
            
            if (data.minDate) data.minMonth = data.yDate.year === data.minDate.year ? data.minDate.month : 1;
            else data.minMonth = 1;
            if (data.maxDate)  data.maxMonth = data.yDate.year === data.maxDate.year ? data.maxDate.month + 1 : 13;
            else data.maxMonth = 13;
        },
        render: function (next) {
            var parentData = this.parent.data, data = this.data;
            data.yDate = parentData.yDate;
            data.minDate = parentData.minDate;
            data.maxDate = parentData.maxDate;
            data.minYear = data.minDate ? data.minDate.year : 1950;
            data.maxYear = data.maxDate ? data.maxDate.year + 1: 2100;
            this.createMinMaxYearAndMonth();
            data.selectHoursHtml = this.computedHours();
            data.selectMinutesHtml = this.computedMinutes();
            data.hourStyle = "transform: translateY(" + (3 - (data.yDate.year - data.minYear)) * 28 + "px)";
            data.minuteStyle = "transform: translateY(" + (3 - (data.yDate.month - data.minMonth)) * 28 + "px)";
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        computedHours: function () {
            var hour = this.data.yDate.year, data = this.data;
            var html = "";
            for (var i = data.minYear; i < data.maxYear; i++) {
                var str = i;
                if (i == hour) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        },
        computedMinutes: function () {
            var minute = this.data.yDate.month, data = this.data;
            var html = "";
            for (var i = data.minMonth; i < data.maxMonth; i++) {
                var str = ("0" + i).slice(-2);
                if (i == minute) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        },
        iconClickHourHandler: function (ev) {
            var component = ev.detail.component;
            if (component.dataset.action == "down") {
                this.operateHour(1);
            }
            else if (component.dataset.action == "up") {
                this.operateHour(-1);
            }
        },
        operateHour: function (num) {
            if (num > 0) {
                if (this.data.yDate.year < this.data.maxYear - 1) this.data.yDate.year++;
            }
            else {
                if (this.data.yDate.year > this.data.minYear) this.data.yDate.year--;
            }
            this.domList.selectHour.querySelector("ul").style.transform = 'translateY(' + (3 - (this.data.yDate.year - this.data.minYear)) * 28 + 'px)';
            
            this.domList.hourSelected.classList.remove("selected");
            this.resetSelectHour();

            this.createMinMaxYearAndMonth();
            if (this.data.yDate.month < this.data.minMonth) this.data.yDate.month = this.data.minMonth;
            if (this.data.yDate.month >= this.data.maxMonth) this.data.yDate.month = this.data.maxMonth - 1;
            this.data.selectMinutesHtml = this.computedMinutes();
            this.domList.selectMinuteUl.innerHTML = '<li></li><li></li><li></li>' + this.data.selectMinutesHtml + '<li></li><li></li><li></li>';
            this.domList.selectMinuteUl.style.transform = 'translateY(' + (3 - (this.data.yDate.month - this.data.minMonth)) * 28 + 'px)';
            this.domList.minuteSelected = this.domList.selectMinuteUl.querySelector(".selected");

            this.parent.staticPage.changeYearMonth();
        },
        operateMinute: function (num) { 
            if (num > 0) {
                if (this.data.yDate.month < this.data.maxMonth - 1) this.data.yDate.month++;
            }
            else {
                if (this.data.yDate.month > this.data.minMonth) this.data.yDate.month--;
            }
            this.domList.selectMinute.querySelector("ul").style.transform = 'translateY(' + (3 - (this.data.yDate.month - this.data.minMonth)) * 28 + 'px)';
            this.parent.staticPage.changeYearMonth();
            this.domList.minuteSelected.classList.remove("selected");
            this.resetSelectMinute();
        },
        iconClickMinuteHandler: function (ev) {
            var component = ev.detail.component;
            if (component.dataset.action == "down") {
                this.operateMinute(1);
            }
            else if (component.dataset.action == "up") {
                this.operateMinute(-1);
            }
        },
        resetSelectHour: function () {
            var hour = this.data.yDate.year;
            var target = this.domList.selectHourUl.children[hour - this.data.minYear + 3]
            target.classList.add("selected");
            this.domList.hourSelected = target;
        },
        resetSelectMinute: function () {
            var minute = this.data.yDate.month;
            var target = this.domList.selectMinuteUl.children[minute - this.data.minMonth + 3]
            target.classList.add("selected");
            this.domList.minuteSelected = target;
        },
        clickHourHandler: function (ev) {
            var target = ev.target;
            if (target.nodeName.toUpperCase() == "LI") {
                this.data.yDate.year = parseInt(ev.target.textContent);
                
                target.parentNode.style.transform = 'translateY(' + (3 - (this.data.yDate.year - this.data.minYear)) * 28 + 'px)';
                this.domList.hourSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList.hourSelected = target;

                this.createMinMaxYearAndMonth();
                if (this.data.yDate.month < this.data.minMonth) this.data.yDate.month = this.data.minMonth;
                if (this.data.yDate.month > this.data.maxMonth) this.data.yDate.month = this.data.maxMonth - 1;
                this.data.selectMinutesHtml = this.computedMinutes();
                this.domList.selectMinuteUl.innerHTML = '<li></li><li></li><li></li>' + this.data.selectMinutesHtml + '<li></li><li></li><li></li>';
                this.domList.selectMinuteUl.style.transform = 'translateY(' + (3 - (this.data.yDate.month - this.data.minMonth)) * 28 + 'px)';
                this.domList.minuteSelected = this.domList.selectMinuteUl.querySelector(".selected");

                this.parent.staticPage.changeYearMonth();
            }
        },
        clickMinuteHandler: function (ev) {
            var target = ev.target;
            if (target.nodeName.toUpperCase() == "LI") {
                this.data.yDate.month = parseInt(ev.target.textContent);
                this.parent.staticPage.changeYearMonth();
                target.parentNode.style.transform = 'translateY(' + (3 - (this.data.yDate.month - this.data.minMonth)) * 28 + 'px)';
                this.domList.minuteSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList.minuteSelected = target;
            }
        }
    })
})